<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="container">
    <van-nav-bar title="健康" />
     <div class="top">
    <div class="consult">
      <div class="consult-left" @click="toConsult">
        <img src="../../assets/img/咨询.png" alt="" />

      </div>
      <div class="consult-right">
        <div class="right-left"></div>
        <div class="right-text">
          根据你的选择，以下有建议你重点关注 哦~
          健康管理，病情分析，复杂重病推荐 安排全国专家等，也可
          <span @click="toConsult">点击头像咨询我</span>
        </div>
      </div>
    </div>
    <!-- 健康计划 -->
    <div class="project">
      <div class="project-head">
        <div class="head-left">健康计划</div>
        <div class="head-right" @click="toPlan">
          全部计划<van-icon name="arrow" />
        </div>
      </div>
          </div>
      <div style="overflow-x: scroll;">
        <div class="project-body">
        <van-swipe
          :loop="false"
          class="swipe"
          :width="170"
          :show-indicators="false"
        >
         <div style="width: 100%;height: 100%;background-color: #717780;" class="mantt">
           <van-swipe-item class="man1" @click="cultivation">
            <div class="man-text">8天健康养成计划</div>
            <div class="man-shu">6390人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
         </div>
           <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt" >
          <van-swipe-item class="man2" @click="Skincare">
            <div class="man-text">15天护肤计划</div>
            <div class="man-shu">149026人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>

           <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man3" @click="Medic">
            <div class="man-text">欧茜医生0~1岁育...</div>
            <div class="man-shu">71777人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>
          <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man4" @click="pimple">
            <div class="man-text">21天战痘计划</div>
            <div class="man-shu">209941人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>
           <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man5" @click="Sleep">
            <div class="man-text">睡眠改善计划</div>
            <div class="man-shu">204905人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>
             <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man6" @click="Health">
            <div class="man-text">30天上班族保健计划</div>
            <div class="man-shu">111073人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>
           <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man7" @click="Leg">
            <div class="man-text">21天瘦腿计划</div>
            <div class="man-shu">209941人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>
           <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man8" @click="Waist">
            <div class="man-text">21天瘦腰计划</div>
            <div class="man-shu">209941人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>
              <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man9" @click="homestead">
            <div class="man-text">7天宅家运动计划</div>
            <div class="man-shu">209941人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>
             <div style="width: 100%;height: 100%;background-color: #717780;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man10" @click="Lose">
            <div class="man-text">30天减肥饮食计划</div>
            <div class="man-shu">209941人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div>
           <!-- <div style="width: 100%;height: 100%;background-color: #f00;margin-left: 10px;" class="mantt">
          <van-swipe-item class="man11" @click="weight">
            <div class="man-text">30天减肥运动计划</div>
            <div class="man-shu">209941人已加入</div>
            <div class="man-button">免费加入</div>
          </van-swipe-item>
          </div> -->
        </van-swipe>
      </div>
      </div>
    </div>

    <div class="tool">
      <div class="tool-ha">健康工具箱</div>
      <div class="tool-hb">
        <van-grid :column-num="5">
          <van-grid-item icon="photo-o" @click="evaluation">
            <img src="../../assets/img/健康.png" alt="" />
            <div class="gong">健康测评</div>
          </van-grid-item>
          <van-grid-item icon="photo-o" @click="vaccine">
            <img src="../../assets/img/疫苗.png" alt="" />
            <div class="gong">疫苗时间</div>
          </van-grid-item>
          <van-grid-item icon="photo-o" @click="diet">
            <img src="../../assets/img/饮食.png" alt="" />
            <div class="gong">饮食宜忌</div>
          </van-grid-item>
          <van-grid-item icon="photo-o" @click="Parenting">
            <img src="../../assets/img/育儿.png" alt="" />
            <div class="gong">育儿知识</div>
          </van-grid-item>
          <van-grid-item icon="photo-o" @click="Growth">
            <img src="../../assets/img/生长.png" alt="" />
            <div class="gong">生长曲线</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>


    <div class="archives">
      <div class="archives-head">
        <div class="head-left">
          <div class="left-tab">健康档案</div>
          <div class="left-tap">开启记录 让健康有迹可循</div>
        </div>

      </div>
      <div class="archives-body">
        <div class="body-tag">
           <p class="htaa" @click="Editor"><span class="htab">+</span>新建档案</p>
        </div>

        <div class="body-san"></div>

        <div class="body-top">
          <div class="top">
            <div class="top-left">个人基本信息</div>
            <div class="top-right">去编辑<van-icon name="arrow" /></div>
          </div>

          <div class="boa">
            <div class="boa-left" @click="Heavy">
              <div class="boa-left-ti">
                <div class="boa-ti">体重</div>
                <div class="boa-an"><van-icon name="arrow" /></div>
              </div>
              <div class="boa-left-shu">0</div>
              <div class="boa-left-text">保持健康，从管理体重开始</div>
            </div>
            <div class="boa-right" @click="Movement">
              <div class="boa-left-ti">
                <div class="boa-ti">运动</div>
                <div class="boa-an"><van-icon name="arrow" /></div>
              </div>
              <div class="boa-left-shu">0</div>
              <div class="boa-left-text">每日锻炼半小时，助益身心</div>
            </div>
          </div>

          <div class="boa">
            <div class="boa-left" @click="Sugar">
              <div class="boa-left-ti">
                <div class="boa-ti">血糖</div>
                <div class="boa-an"><van-icon name="arrow" /></div>
              </div>
              <div class="boa-left-shu">0</div>
              <div class="boa-left-text">规范记录掌握血糖变化规律</div>
            </div>
            <div class="boa-right" @click="Blood">
              <div class="boa-left-ti">
                <div class="boa-ti">血压</div>
                <div class="boa-an"><van-icon name="arrow" /></div>
              </div>
              <div class="boa-left-shu">0</div>
              <div class="boa-left-text">定时监测利于改善血压控制</div>
            </div>
          </div>

          <div class="boa">
            <div class="boa-left" @click="Heart">
              <div class="boa-left-ti">
                <div class="boa-ti">心率</div>
                <div class="boa-an"><van-icon name="arrow" /></div>
              </div>
              <div class="boa-left-shu">0</div>
              <div class="boa-left-text">监测心率，关注心脏健康</div>
            </div>
            <div class="boa-right" @click="Seep">
              <div class="boa-left-ti">
                <div class="boa-ti">睡眠</div>
                <div class="boa-an"><van-icon name="arrow" /></div>
              </div>
              <div class="boa-left-shu">0</div>
              <div class="boa-left-text">睡好7小时，保持充沛精力</div>
            </div>
          </div>

          <div class="fats">
            <div class="fa-left">
              <img src="../../assets/img/绑定.png" alt="" />
              <div class="fa-text">绑定智能设备，自动上传数据</div>
            </div>
            <div class="fa-right">
              取绑定
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab">
      <van-tabs v-model:active="active">
        <van-tab title="电子病历夹">
          <van-empty description="看病检查单 报告单 体检报告一键上传">
            <van-button round type="primary" class="bottom-button"
              >+新建病历夹</van-button
            >
          </van-empty>
        </van-tab>
        <van-tab title="体检报告">
          <van-empty image="error" description="暂无体检报告" />
        </van-tab>
        <van-tab title="咨询记录">
          <van-empty image="error" description="暂无咨询记录" />
        </van-tab>
        <van-tab title="会员服务">
          <van-empty image="error" description="未开通会员服务" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const active = ref(0)
const router = useRouter()

// 春雨健康顾问
const toConsult = () => {
  router.push('/Consultant')
}

// 全部计划
const toPlan = () => {
  router.push('/Plan')
}

// 健康测评
const evaluation = () => {
  router.push('/Evaluation')
}

// 疫苗时间
const vaccine = () => {
  router.push('/Vaccine')
}

// 饮食宜忌
const diet = () => {
  router.push('/Diet')
}

// 育儿知识
const Parenting = () => {
  router.push('/Parenting')
}

// 生长曲线
const Growth = () => {
  router.push('/Growth')
}

// 8天健康养成计划
const cultivation = () => {
  router.push('/Cultivation')
}

// 15天护肤计划
const Skincare = () => {
  router.push('/Skincare')
}

// 欧茜医生
const Medic = () => {
  router.push('/Medic')
}

// 21天战痘计划
const pimple = () => {
  router.push('/Pimple')
}

// 睡眠改善计划
const Sleep = () => {
  router.push('/Sleep')
}

// 30天上班族保健计划
const Health = () => {
  router.push('/Health')
}

// 21天瘦腿计划
const Leg = () => {
  router.push('/Leg')
}

// 21天瘦腰计划

const Waist = () => {
  router.push('/Waist')
}

// 7天宅家运动计划

const homestead = () => {
  router.push('/Homestead')
}

// 30天减肥饮食计划
const Lose = () => {
  router.push('/Lose')
}

// 30天减肥运动计划
const weight = () => {
  router.push('/Weight')
}

const Heavy = () => {
  router.push('/Heavy')
}

//
const Movement = () => {
  router.push('/Movement')
}

const Sugar = () => {
  router.push('/Sugar')
}

const Blood = () => {
  router.push('/Blood')
}

const Heart = () => {
  router.push('/Heart')
}

const Seep = () => {
  router.push('/Seep')
}



// 点击新建档案
const Editor = () => {
  router.push('/Editor')
}


</script>

<style lang="scss">
.container {
<<<<<<< HEAD
  overflow: hidden;
=======
  overflow:hidden;
>>>>>>> f8fdea22ae4acc1c9fe5d22ca2989d51005ee5f3
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;
  font-size: 15px;
<<<<<<< HEAD
=======

>>>>>>> f8fdea22ae4acc1c9fe5d22ca2989d51005ee5f3
  .top{
    width: 100%;
   height: 262px;
   position: relative;
    background: linear-gradient(to bottom, #8cdec8,#fff);
    .right-left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  left: -8px;
  top: 40px;
}

.consult {
  height: 100px;
  width: 100%;
  // background-color: #8ddcc7;
}

.consult-left {
  float: left;
  height: 100px;
  width: 100px;
  // background-color: red;
  img {
    height: 70px;
    width: 70px;
    margin: 15px;
    border-radius: 50px;
    animation: zoom 3s infinite;

  }
  @keyframes zoom{
    0%{
      transform: scale(1)
    }
    50%{
      transform: scale(1.1);
    }
    100%{
      transform: scale(1);
    }
  }

}

.consult-right {
  position: relative;
  float: left;
  height: 100px;
  width: 270px;
  // background-color:pink;
  .right-text {
    height: 80px;
    width: 100%;
    background-color: #fff;
    margin: 10px 0;
    border-radius: 10px;
    font-size: 12px;
    line-height: 25px;
    padding: 2px 20px;
    color: #979797;
    font-weight: bold;

    span {
      color: #2fc78a;
      font-size: 12px;
    }
  }
}

.project {
  height: 170px;
  width: 128%;

  // background-color: yellow;
  // margin: 10px 0;
}
.project-head {
  height: 60px;
  width: 128%;
  // background-color: #b9e7db;
  line-height: 50px;

  // font-size: 20px;
  .head-left {
    float: left;
    font-weight: bold;
    padding: 0 10px;
    font-size: 18px;
  }
  .head-right {
    float: right;
    color: #999;
    font-size: 14px;
    padding: 0 10px;
    position: relative;
  }
}
.project-body {
position: absolute;
top:150px;
  height: 120px;
  width: 100%;
  // background-color: pink;
  padding: 0 10px;
.mantt{
  border-radius: 8px
}

  .man1 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
  .man2 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女2.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
   .man3 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女4.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
   .man4 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女5.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
   .man5 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女6.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
   .man6 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女7.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
   .man7 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女8.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
   .man8 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女9.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
   .man9 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女10.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
   .man10 {
    height: 110px;
    width: 100%;
    background-color: #717780;
    margin-right: 0 20px;

    border-radius: 10px;
    // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
    // border: 2px solid #fff;
    color: #fff;
    background: url('../../../public/jkimg/美女11.png') no-repeat right;
    .man-text {
      padding: 10px;
      font-weight: bold;
    }
    .man-shu {
      padding: 0 10px;
      font-size: 12px;
    }
    .man-button {
      margin-top: 10px;
      margin-left: 10px;
      height: 30px;
      width: 80px;
      background-color: #62676f;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
  //   .man11 {
  //   height: 110px;
  //   width: 100%;
  //   background-color: #717780;
  //   margin-right: 0 20px;

  //   border-radius: 10px;
  //   // box-shadow: 10px 10px 10px 5px rgba(143, 139, 139, 0.5);
  //   // border: 2px solid #fff;
  //   color: #fff;
  //   background: url('../../../public/jkimg/美女11.png') no-repeat right;
  //   .man-text {
  //     padding: 10px;
  //     font-weight: bold;
  //   }
  //   .man-shu {
  //     padding: 0 10px;
  //     font-size: 12px;
  //   }
  //   .man-button {
  //     margin-top: 10px;
  //     margin-left: 10px;
  //     height: 30px;
  //     width: 80px;
  //     background-color: #62676f;
  //     border-radius: 20px;
  //     text-align: center;
  //     line-height: 30px;
  //     font-size: 12px;
  //   }
  // }
}
  }
}



.tool {
  width: 100%;
  margin: 10px 0;

  // background-color: pink;
  // border-bottom: 1px solid #000;
}
.tool-ha {
  height: 50px;
  width: 100%;
  line-height: 50px;
  font-size: 20px;
  padding: 0 10px;
}
.tool-hb {
  height: 80px;
  width: 100%;
  background-color: #fff;
  img {
    height: 30px;
    width: 30px;
  }
  .gong {
    font-size: 12px;
  }
}

.archives {
  height: 90%;
  width: 100%;
  // background-color: pink;

  .archives-head {
    height: 50px;
    width: 100%;
    // background-color: pink;
    line-height: 50px;
    .head-left {
      float: left;

      .left-tab {
        float: left;
        font-size: 20px;
        margin: 0 10px;
      }
      .left-tap {
        float: left;
        font-size: 12px;
        color: #999;
      }
    }
    .head-right {
      float: right;
      // border: 1px solid #ccc;
      border-radius: 40px;
      position: relative;
      .hta{
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 40px;
        font-size: 12px;


      }
    }
  }
  .archives-body {
    position: relative;
    height: 550px;
    width: 100%;
    // background-color: rgb(195, 255, 192);

    .body-tag {
      height: 50px;
      width: 95%;
       background: #fff;
    margin: auto;
      .htaa{
       margin-left: 43%;
      display: inline-block;
      margin-top: 13px;
      color: #1cc381;
      .htab{
        margin-right: 10px;
        border: 1px solid #1cc381;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        display: inline-block;
        text-align: center;

      }
      }
    }

    .body-san {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #fff;
      z-index: 999;
      left: 55px;
      top: 9px;
    }

    .body-top {
      height: 500px;
      width: 100%;
      background-color: #fff;
      padding: 15px 10px;
      box-shadow: 0px -5px 10px rgba(145, 141, 141, 0.5);
      .top {
        height: 50px;
        width: 100%;
        background-color: #f4f6f7;
        line-height: 50px;
        margin-bottom: 10px;
        .top-left {
          float: left;
          padding: 0 10px;
        }
        .top-right {
          float: right;
          padding: 0 10px;
          color: #6a6a6a;
          font-size: 13px;
        }
      }

      .boa {
        height: 120px;
        width: 100%;
        // background-color: pink;
        // margin-top: 10px;

        .boa-left {
          float: left;
          height: 100px;
          width: 170px;
          background-color: #f4f6f7;
          .boa-left-ti {
            padding: 10px;
            height: 30px;
            width: 100%;
            // background-color:orange;
            .boa-ti {
              float: left;
            }
            .boa-an {
              float: right;
            }
          }
          .boa-left-shu {
            padding: 10px;
          }
          .boa-left-text {
            padding: 0 10px;
            font-size: 11px;
            color: #999;
          }
        }
        .boa-right {
          float: right;
          height: 100px;
          width: 160px;
          background-color: #f4f6f7;

          .boa-left-ti {
            padding: 10px;
            height: 30px;
            width: 100%;
            // background-color:orange;
            .boa-ti {
              float: left;
            }
            .boa-an {
              float: right;
            }
          }
          .boa-left-shu {
            padding: 10px;
          }
          .boa-left-text {
            padding: 0 10px;
            font-size: 11px;
            color: #999;
          }
        }
      }

      .fats {
        height: 50px;
        width: 100%;
        background-color: #f4f6f7;
        line-height: 50px;
        .fa-left {
          float: left;
          height: 50px;
          img {
            float: left;
            height: 25px;
            margin: 10px;
          }
          .fa-text {
            float: left;
            font-size: 14px;
          }
        }
        .fa-right {
          float: right;
          padding: 0 10px;
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}

.tab {
  height: 500px;
  width: 100%;
  // background-color: #0bf341;

}
</style>
